// import { } from "react"
import Nav from "@/conmpones/nav/index"
import homeLess from "./index.module.less"
import { useState } from "react"
import { useNavigate} from "react-router-dom"
import { Toast, Tabs } from 'antd-mobile'
import Footer from "./conmpones/footer"
import login_logo from "../../assets/login/login_logo.png"
import  {lognin} from "../../api/login/index"
function Home(props) {
    //是否选中协议
    const [agreement, setAgreement] = useState(false)
    // 密码登录
    const [psPthon, setPsPthon] = useState("")
    const [psPassword, setPsPassword] = useState("")
    // 跳转
    const navigate = useNavigate()
    const phoneLogin = async () => {
        if (!agreement) {
            Toast.show({
                content: '请勾选用户协议',
            })
            return
        }
        if (qty) {
            Toast.show({
                content: '登录成功',
            })
        } else {
           let res = await lognin({
            password:psPassword,
            userName:psPthon
           })
           if (res.code === 0) {
            let o = " "
            let  token = "Bearer" + o +  res.data.token.token
            localStorage.setItem("token",token)
               Toast.show({
                  content: '登录成功',
               })
               navigate("/home")
           } else {
               Toast.show({
                content: res.msg,
              })
           }
           console.log(res);
           
        }
    }

    const [qty, setQty] = useState(true)
    const onkey = () => {
        setQty(!qty)
    }
    return (
        <div className={homeLess.main}>
            <div className={homeLess.title}><Nav left={true} title="首页"></Nav></div>
            <div className={homeLess.contet}>
                <div className={homeLess.logo}><img src={login_logo} alt="" /></div>
                {
                    qty ? <div className={homeLess.onekey}>
                        <div className={homeLess.phone}>
                            138****5797
                        </div>
                        <div className={homeLess.register} onClick={phoneLogin}>
                            本机号码一键登录
                        </div>
                        <div className={homeLess.other} onClick={onkey}>
                            其他手机验证或密码登录
                        </div>
                        <div className={homeLess.rest}>
                            其他登陆方式
                        </div>
                    </div>
                        :
                        <div className={homeLess.qty}>
                            <Tabs style={{
                                '--active-line-color': '#000',
                                '--active-title-color': "#000",
                            }}>
                                <Tabs.Tab title='密码登录' key='fruits'>
                                    <div className={homeLess.tabinput}>
                                        <input value={psPthon} onChange={(e) => { setPsPthon(e.target.value) }} type="text" placeholder="请输入手机号/用户名" />
                                    </div>
                                    <div className={homeLess.tabpasword}>
                                        <input value={psPassword} onChange={(e) => { setPsPassword(e.target.value) }} type="password" placeholder="请输入密码" />
                                    </div>
                                    <div className={homeLess.forger}>忘记密码?</div>
                                </Tabs.Tab>
                                <Tabs.Tab title='验证码登录' key='vegetables'>
                                    <div className={homeLess.tabinput}>
                                        <input type="text" placeholder="请输入手机号/用户名" />
                                    </div>
                                    <div className={homeLess.tabpaswords}>
                                        <input type="text" placeholder="请输入验证码" />
                                        <div className={homeLess.verification}>获取验证码</div>
                                    </div>
                                    <div className={homeLess.phoncj}>手机号未注册用户将自动创建实现家账号</div>
                                </Tabs.Tab>
                            </Tabs>
                            <div className={homeLess.register} onClick={phoneLogin}>
                                立即登录
                            </div>
                            <div className={homeLess.others} onClick={onkey}>
                                本机号码一键登录
                            </div>
                        </div>
                }
                <Footer agreement={agreement} setAgreement={setAgreement}></Footer>
            </div>

        </div>
    )
}


export default Home